@use '../variables';

$block: '.#{variables.$ns}divider';

#{$block} {
    --_--content-gap: 8px;
    --_--size: var(--g-divider-size, 1px);
    --_--background: var(--g-divider-color, var(--g-color-line-generic));

    background: var(--_--background);

    &:not(:empty) {
        background: none;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;

        &::before,
        &::after {
            content: '';
        }
    }

    &::before,
    &::after {
        flex-grow: 1;
        background: var(--_--background);
    }

    &_orientation {
        &_vertical {
            width: var(--_--size);
            flex-direction: column;

            &::before,
            &::after {
                width: var(--_--size);
            }

            &::before {
                margin-block-end: var(--_--content-gap);
            }

            &::after {
                margin-block-start: var(--_--content-gap);
            }
        }

        &_horizontal {
            height: var(--_--size);

            &::before,
            &::after {
                height: var(--_--size);
            }

            &::before {
                margin-inline-end: var(--_--content-gap);
            }

            &::after {
                margin-inline-start: var(--_--content-gap);
            }
        }
    }

    &_align {
        &_start::before {
            display: none;
        }

        &_end::after {
            display: none;
        }
    }
}
